    <script type="text/javascript" src="<?php echo $this->baseUrl('stuff/jquery/jquery.cookie.js')?>"></script>
    <script type="text/javascript" src="<?php echo $this->baseUrl('stuff/jquery/jquery.hotkeys.js')?>"></script>
    <script type="text/javascript" src="<?php echo $this->baseUrl('stuff/jstree/jquery.jstree.js')?>"></script>
    <?php $this->headLink()->appendStylesheet("stuff/jquery/cusel/cusel.css") ?>
    <?php $this->headScript()->appendFile("stuff/jquery/cusel/cusel.js") ?>
    

    <div id="container"> 
 
<div id="mmenu" style="height:30px; overflow:auto;width: 750px;"> 
<input type="button" id="add_default" value="Добавить" style="display:block; float:left;"/> 
<input type="button" id="rename" value="Переименовать" style="display:block; float:left;"/> 
<input type="button" id="remove" value="Удалить" style="display:block; float:left;"/> 
<input type="button" id="cut" value="Вырезать" style="display:block; float:left;"/> 
<input type="button" id="paste" value="Вставить" style="display:block; float:left;"/> 
<input type="button" id="clear_search" value="Очистить" style="display:block; float:right;"/> 
<input type="button" id="search" value="Поиск" style="display:block; float:right;"/> 
<input type="text" id="text" value="" style="display:block; float:right;" /> 
</div> 
 <table>
 <tr>
 <td>
 	<div id="demo" class="demo" style="width: 600px;"></div>	
 </td>
 <td>
		<div style="border: 1px solid red" id="linksTool"></div> 
 </td>
 </tr>
 </table>

 
<script type="text/javascript"> 

function createSelect(name, items){

var Result = "<select class='cuselSelect' name='" + name + "'>";

     Result+= "<option value='0'>Выберите</option>";

$.each(items, function(index, item) {
	Result+= "<option value='" + item.guid + "'>" + item.title + "</option>";
	});

	"</select><br />";
	return Result;
}


function createLinksSelect(name, items){

	var Result = "<select class='linksSelect' name='" + name + "'>";

	     Result+= "<option value='0'>Выберите</option>";

	$.each(items, function(index, item) {
		Result+= "<option value='" + item.link + "'>" + item.title + "</option>";
		});

		"</select><br />";
		return Result;
	}



window.GUID = "274f58d99be58f5eb0c4c7a19c1ddbf6";


function processChoice(obj)
{
	$.post('structure/get-menu-tool',{guid:$(obj).val()},function (data){
		

if (data.type="links")
{
	$("#linksTool").append(createLinksSelect('guid',data.items));
}
else
{
		$("#linksTool").append(createSelect('guid',data.items));

			var params = {
					changedEl: ".cuselSelect",
					scrollArrows: false
				}
				cuSel(params);
			$(".cuselSelect").unbind('change');
			$(".cuselSelect").change(function(){processChoice(this);});
}			
			
		},'json');

}


$(function () {

	$.post('structure/get-menu-tool',{guid:window.GUID},function (data){
		
		console.dir(data);
			$("#linksTool").append(createSelect('guid',data.items));

			var params = {
					changedEl: ".cuselSelect",
					scrollArrows: false
				};
				cuSel(params);
				$(".cuselSelect").change(function(){processChoice(this);});
			
		},'json');

	



	


	
	 



	 
    $("#demo")
        .jstree({ 
            "plugins" : [ "themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu" ],
            "json_data" : { 
                "ajax" : {
                    "url" : url("structure/operations"),
                    "data" : function (n) { 
                        return { 
                            "operation" : "get_children", 
                            "id" : n.attr ? n.attr("id").replace("node_","") : 1 
                        }; 
                    }
                }
            },
            "ui" : {
                "initially_select" : [ "node_4" ]
            }
        })
        .bind("create.jstree", function (e, data) {
            $.post(
                url("structure/operations"), 
                { 
                    "operation" : "create_node", 
                    "id" : data.rslt.parent.attr("id"), 
                    "position" : data.rslt.position,
                    "title" : data.rslt.name,
                    "type" : data.rslt.obj.attr("rel")
                }, 
                function (r) {
                    if(r.status) {
                        $(data.rslt.obj).attr("id", r.id);
                    }
                    else {
                        $.jstree.rollback(data.rlbk);
                    }
                }
            );
        })
        .bind("remove.jstree", function (e, data) {
            data.rslt.obj.each(function () {
                $.ajax({
                    async : false,
                    type: 'POST',
                    url: url("structure/operations"),
                    data : { 
                        "operation" : "remove_node", 
                        "id" : this.id.replace("node_","")
                    }, 
                    success : function (r) {
                        if(!r.status) {
                            data.inst.refresh();
                        }
                    }
                });
            });
        })
        .bind("rename.jstree", function (e, data) {
            $.post(
                url("structure/operations"), 
                { 
                    "operation" : "rename_node", 
                    "id" : data.rslt.obj.attr("id").replace("node_",""),
                    "title" : data.rslt.new_name
                }, 
                function (r) {
                    if(!r.status) {
                        $.jstree.rollback(data.rlbk);
                    }
                }
            );
        })
        .bind("move_node.jstree", function (e, data) {
            data.rslt.o.each(function (i) {
                $.ajax({
                    async : false,
                    type: 'POST',
                    url: url("structure/operations"),
                    data : { 
                        "operation" : "move_node", 
                        "id" : $(this).attr("id").replace("node_",""), 
                        "ref" : data.rslt.np.attr("id").replace("node_",""), 
                        "position" : data.rslt.cp + i,
                        "title" : data.rslt.name,
                        "copy" : data.rslt.cy ? 1 : 0
                    },
                    success : function (r) {
                        if(!r.status) {
                            $.jstree.rollback(data.rlbk);
                        }
                        else {
                            $(data.rslt.oc).attr("id", "node_" + r.id);
                            if(data.rslt.cy && $(data.rslt.oc).children("UL").length) {
                                data.inst.refresh(data.inst._get_parent(data.rslt.oc));
                            }
                        }
                        $("#analyze").click();
                    }
                });
            });
        });

    $("#demo").bind("select_node.jstree", function (event, data)
			 {

//		  console.log(data.rslt.obj.attr("id"));  


		  });

    
});
</script> 
<script type="text/javascript"> 
$(function () { 
    $("#mmenu input").click(function () {
        switch(this.id) {
            case "add_default":
            case "add_folder":
                $("#demo").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
                break;
            case "search":
                $("#demo").jstree("search", document.getElementById("text").value);
                break;
            case "text": break;
            default:
                $("#demo").jstree(this.id);
                break;
        }
    });
});
</script> 
</div> 